<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title></title>
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://www.juheweb.com/demo/js/jquery.min.js"></script>
    <style>
    	.row{ margin-top:5px;}
    </style>
</head>
<body>
<div class="container">
	<div class="panel panel-default" style="margin-top:10px">
   		<div class="panel-heading">
                <input type="text" class="att_title form-control" name="att_title" placeholder="属性" style="width:200px;">
        </div>
      <div class="panel-body" id="panel-body">
       	<div class="row">
          <div class="col-xs-4">
            <input type="text" class="form-control choix_name" placeholder="属性名" value="">
          </div>
          <div class="col-xs-2">
            <input type="text" class="form-control choix_price" placeholder="价格" value="0">
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control choix_desc" placeholder="备注"  value="">
          </div>
        </div>
      </div>      
      <div class="panel-footer">
      	<div id="att-status"></div>
        <div class="row">
            <div class="col-xs-3">
                <button type="button" class="btn btn-info" id="att_add">添加</button>
            </div>
            <div class="col-xs-9">
                <button id="submitdata" type="button" class="btn btn-info">生成</button>
            </div>
        </div>     	 
      </div>
    </div>
</div>
<script>
$(document).ready(function(){	
	$("#submitdata").on("click",function(){
		var att_title =  $(".att_title").val();
		if(att_title.trim() == ''){return}
		var res = new Object();
		var att = $("#panel-body").find('.row');
		var temp = [];
		att.each(function(index,element) {			
			var name = $(".choix_name").eq(index).val().trim();
			var price = $(".choix_price").eq(index).val().trim();
			var desc =  $(".choix_desc").eq(index).val().trim();
			if(name.trim()!='')
			{
				var reg1 =  /^\d+$/;
				var choix = new Object();							
				choix.name = name;
			   	choix.price = price.match(reg1)?price:"0";
				desc.trim()!=''?choix.desc=desc:"";
				temp.push(choix);				
			}
        });
		if(temp.length>0)
		{
			res.title = $(".att_title").val();
			res.choix = temp;
			$("#att-status").html(JSON.stringify(res));
		}
		else{ alert('至少需要1个选项');}
	});
	
	$("#att_add").on("click",function() {
		var x = $('.row');			
		if(x.length<6){
    var str = '<div class="row"><div class="col-xs-4"><input type="text" class="form-control choix_name" placeholder="属性名" value=""></div><div class="col-xs-2"><input type="text" class="form-control  choix_price" placeholder="价格" value="0"></div><div class="col-xs-6"><input type="text" class="form-control choix_desc" placeholder="备注" value=""></div></div>';
   	$('#panel-body').append(str);
	}
	else{
			alert('最多允许添加6项');
		}
});

});
</script>
</body>
</html>